babel-traverse

What is babel-traverse?

The babel-traverse package is part of the Babel compiler ecosystem and provides the ability to traverse and manipulate the abstract syntax tree (AST) generated from JavaScript code. It allows developers to analyze and rewrite code programmatically, which is useful for building compilers, code transformation tools, linters, and more.

What are babel-traverse's main functionalities?

Visiting Nodes

This feature allows you to visit and manipulate nodes in the AST. In the provided code, we change all identifiers named 'n' to 'x' in a simple function.

const babel = require('@babel/core');
const traverse = require('babel-traverse').default;

const code = `function square(n) { return n * n; }`;
const ast = babel.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: 'n' })) {
      path.node.name = 'x';
    }
  }
});
console.log(babel.generate(ast).code);

Scope Manipulation

This feature involves manipulating the scope of variables. In the example, within a function declaration, the variable 'b' is renamed to 'c'.

const babel = require('@babel/core');
const traverse = require('babel-traverse').default;

const code = `let a = 2; function test() { let b = 4; }`;
const ast = babel.parse(code);

traverse(ast, {
  FunctionDeclaration(path) {
    path.scope.rename('b', 'c');
  }
});
console.log(babel.generate(ast).code);

Other packages similar to babel-traverse

recast

Recast is a JavaScript AST manipulation library that allows you to parse, modify, and print your code while preserving the original formatting as much as possible. It differs from babel-traverse in that it focuses more on preserving the code's original format and less on providing a comprehensive transformation toolkit.

esprima

Esprima is a high performance, standard-compliant ECMAScript parser that also allows you to traverse and analyze JavaScript code. Unlike babel-traverse, Esprima does not focus on transformations but rather on parsing and providing a detailed AST.

README

babel-traverse

babel-traverse maintains the overall tree state, and is responsible for replacing, removing, and adding nodes.

Install

$ npm install --save babel-traverse

Usage

We can use it alongside Babylon to traverse and update nodes:

import * as babylon from "babylon";
import traverse from "babel-traverse";

const code = `function square(n) {
  return n * n;
}`;

const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "n" })) {
      path.node.name = "x";
    }
  }
});

:book: Read the full docs here